<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        /**
         * 数组方法：
         * 1. 带回调函数的  [回调函数都是同步的]
         *    forEach     1 遍历数组 2. 直接在原数组修改数据
         *    filter      过滤    将原数组中符合条件的保留下来|排除不符合条件的
         *                有一个原数组，想得到一个新数组，新数组的长度比原数组短，考虑使用filter可能合适
         *    map   【映射】 需要得到一个新数组，新数组的长度如果跟原数组一样，考虑使用map
         *    reduce:  累加
         *    some：   有一个为真即为真，全部为假才为假
         *    every：  每一个都是真才为真，有一个为假即为假
         *    find：
         *    findIndex：
         * 
         * 2. 改变原数组的  7 个
         *    pop
         *        作用：从数组的末尾删除元素
         *        return 被删除的元素
         *    push 
         *        作用：从数组的末尾添加元素
         *        return 新数组的长度
         *    shift
         *        作用：从数组的前面删除元素
         *        return 被删除的元素
         *    unshift
         *        作用：从数组的前面添加元素
         *        return 新数组的长度
         *    sort
         *        作用： 排序
         *        return 排序后的数组
         *    reserve
         *        作用： 翻转数组
         *        return 反转后的数组
         *    splice
         *        作用：数组元素的增删改查
         *        添加：arr.splice(index,0,新增的元素)
         *        删除：arr.splice(index,删除个数)
         *        替换：arr.splice(index,1,替换元素)
         * 
         * 3. 特殊的
         *    join   常用 字符串 split 方法配合使用
         *    slice： 截取数组   arr.slice(starIndex, endIndex)   索引可以是负数
         *            从头开始截取数组，截取到后两个元素  arr.slice(0,-2)
         *            特殊应用：
         *            1. 复制一个数组
         *            2. 将类数组转化为普通数组  Array.prototype.slice.call(要转化的类数组)
         *    concat
         *           
         *    indexOf
         *    includes
         * 
         */


        // 1. forEach
        let arr = [{ id: 1, username: 'atguigu' }, { id: 2, username: 'yuonly' }]

        console.log(111)
        arr.forEach(item => {
            console.log(222);
            if (item.id === 2) {
                item.username = '迪丽热巴'
            }
        })
        console.log(333);
        console.log(arr);

        console.log('start')
        setTimeout(() => {
            console.log('content');
        })
        console.log('end');

        // 2. filter 过滤
        /**
         * 会返回一个过滤后的新数组
         */
        let todos = [ // 待办事项的列表
            {
                id: 1,
                title: '吃饭',
                isDone: true
            },
            {
                id: 2,
                title: '睡觉',
                isDone: false
            },
            {
                id: 3,
                title: '学习',
                isDone: false
            }
        ]
        // 需求删除已完成的待办事项 ==》 就是保留isDone是false 保留未完成的

        let newTodos = todos.filter(todo => {
            //return false;// newTodos []
            //return true; // newTodos 跟 todos 一样
            return !todo.isDone
        })
        console.log(newTodos);

        // 3. map 【映射】
        /**
         * return  也是一个新数组
         * 
         */

        let todoList = [
            {
                id: 1,
                title: '吃饭',
                isDone: true
            },
            {
                id: 2,
                title: '睡觉',
                isDone: false
            },
            {
                id: 3,
                title: '学习',
                isDone: false
            }
        ]

        let newTodoList = todoList.map(todo => {
            todo.isDone = true;
            return todo;
        })

        console.log(newTodoList);

        // 4. reduce
        let nums = [{ age: 10 }, { age: 7 }, { age: 3 }];
        // 需求：将年龄累加到一起
        let total = nums.reduce((pre, cur, index) => {
            //  次数   pre                cur        index      return
            //   1.    reduce第二个参数   当前元素   当前索引    undefined
            //   2.    取上一次的返回值
            //   3.
            //   ..                                             最后一个次的返回值就是 reduce的返回值
            // console.log('pre: ', pre);
            // console.log('cur: ', cur);
            // console.log('index: ', index);
            return pre + cur.age
            // 1   0    {age:10}    return  10
            // 2   10   {age:7}     return  10 + 7
            // 3   17   {age:3}     return  17 + 3
        }, 0)
        console.log(total);


        let todoList1 = [
            {
                id: 1,
                title: '吃饭',
                isDone: true
            },
            {
                id: 2,
                title: '睡觉',
                isDone: true
            },
            {
                id: 3,
                title: '学习',
                isDone: true
            }
        ]
        // 需求：计算已完成代办事项的数量
        let doneNum = todoList1.reduce((pre, cur) => {
            // return pre + (cur.isDone ? 1 : 0)
            return pre + cur.isDone
        }, 0)

        let doneNum2 = todoList1.reduce((pre, cur) => pre + cur.isDone, 0);
        console.log(doneNum2);


        // 5. find : 查找数组中符合条件的第一个元素，返回值是找到的元素
        let goodsList = [
            {
                id: 1,
                gname: '华为手机',
                price: 20
            },
            {
                id: 2,
                gname: '小米手机',
                price: 1999
            },
            {
                id: 1,
                gname: '苹果手机',
                price: 3999
            }
        ]
        let item = goodsList.find(goods => {
            return goods.id === 1
        })
        console.log(item);
        // findIndex 找到第一个符合条件的索引
        let index = goodsList.findIndex(goods => {
            return goods.id === 1
        })
        console.log('index: ', index);

        // 将id是2 的price 价格 + 200
        console.log(goodsList.map(item => {
            if (item.id === 2) {
                item.price += 200
            }
            return item;
        }))

        let index2 = goodsList.findIndex(goods => {
            return goods.id === 2
        })

        goodsList[index2].price += 200;
        console.log(goodsList);

        let obj = goodsList.find(item => {
            return item.id === 2;
        })
        obj.price += 200;
        console.log(goodsList);


        // pop
        let arr3 = [1, 2, 3, 'a'];
        let res1 = arr3.pop();
        console.log(res1);

        // push 
        console.log(['a', 'b', 'c'].push(3))


        // slice 特殊应用：
        // 1. 复制一个数组
        let arr5 = [1, 2, 5, 7];
        let arr6 = arr5.slice(0);
        console.log(arr5, arr6, arr5 === arr6);
        // concat 复制数组
        let arr7 = arr5.concat([]);
        console.log(arr5,arr7, arr5===arr7);
        // 解构
        let arr8 = [...arr5];
        console.log(arr5, arr8, arr5===arr8);

        // slice 特殊应用，将类数组[伪]转化为普通数组
        // 伪数组：有长度有索引，但是不能使用数组的方法
        let lis = document.querySelectorAll('li');
        console.log('lis: ',lis);
        // lis.push(3); // 伪数组，不能使用数组方法

        let newLis = Array.prototype.slice.call(lis);
        console.log('newLis: ', newLis);
        newLis.push(6)
        console.log(newLis);


        // indexOf   includes 都是可以实现 查找一个元素是否在数组中
        /**
         * indexOf 如果有返回对应的索引，如果没有返回 -1 
         * 
         * includes:[es7] 如果有返回布尔值 true，没有返回 false
         */
        let carList = [1,7,5,3]

        let res = carList.indexOf(1);
        console.log(res);

        console.log(carList.includes(11));




    </script>
</body>

</html>